<template>
    <div class="pages store-openMsg" id='app'>
        <div class="pageLevel">
            <div class="operationBox tableSearch">
                <el-button type="primary" @click="submitForm('ruleForm')" size="mini">保存</el-button>
                <el-button type="primary" v-if="setRole('去开户')" @click="openAccount()" size="mini">去开户</el-button>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm system">
                <div class="from_main infon">
                    <div class="infon_text">
                        <span class="infon_shu"></span>
                        <span class="infon_text_t"> 开户信息</span>
                    </div>
                    <el-row>
                        <el-form-item label="客户性质" prop="customerType">
                            <template>
                                <el-select size="small" :disabled="showtext" v-model="ruleForm.customerType" placeholder="请选择">
                                    <el-option label="个人开户" value='0'></el-option>
                                    <el-option label="公司开户" value='1'></el-option>
                                </el-select>
                            </template>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="户名">
                            <el-input :disabled="showtext" v-model="ruleForm.accountName" size="small"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="证件类型">
                            <el-input :disabled="true" v-model="ruleForm.certificateTypes" size="small"></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="证件号">
                            <el-input :disabled="showtext || openStatus" v-model="ruleForm.certificateNo" maxlength="18" onkeyup="value=value.replace(/[^\d|xX]/g,'')" oninput="value=value.replace(/[^\d|xX]/g,'')" onafterpaste="value=value.replace(/[^\d|xX]/g,'')" size="small"></el-input>
                        </el-form-item>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
// import { validates } from '@/rule'
import {
 saveBaseZjAccount,
 updateBaseZjAccount,
 getOpenAccountDetail,
  openAccount,
  
} from '@/api'
import util from '@/util'
import { mapState } from "vuex";
export default {
    computed: mapState(['merchantId','power']),
  data() {
    let checkSpace = (rule, value, callback) => {
      let input = /^[\s]*$/
      if (input.test(value)) {
        return callback(new Error('请勿只输入空格！'))
      } else {
        return callback()
      }
    }
    return {
      id:'',
      openStatus:false,
      showtext:false,
      notY: true, //是否连锁运营
      ruleForm: {
        customerType:'',
        accountName: '', //开户名
        certificateNo:'',//开户身份证
        certificateTypes:'身份证',
      },
      rules: {},
      options: [],
      tableData4: [],
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      pageNum: 1,
      org: false,
      imgindex: 0,
      showWhich: '',
      title: '新建组织机构',
      look: true,
      posIdarr: [],
      showErrMsg: false,
      lastcomp: false, //上级单位是否可修改
      shopType: [
        {
          label: '直营',
          value: 0
        },
        {
          label: '加盟',
          value: 1
        }
      ]
    }
  },
  created() {},
  mounted() {
    this.getOpenAccountDetail()
  },

  methods: {
    //配置权限
    setRole (key) {
            return util.selectTitle(this.power, key)
        },
     submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.id==""){     
             this.saveBaseZjAccount();
            }else{
             this.updateBaseZjAccount();  
            }
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    openAccount() {
     let postdata = {
        orgId: this.merchantId,
      };
      openAccount(postdata).then(res => {
        if(res.code!=200){
           this.$message({
            type: "error",
            message: res.msg
          });
        }else{
          this.$message({
            type: "success",
            message: res.msg
          });
        }
      });
    },
      saveBaseZjAccount() {
      let postdata = {
        baseShopId: this.merchantId,
        accountName : this.ruleForm.accountName,
        certificateType :'0',
        certificateNo :this.ruleForm.certificateNo,
        customerType: this.ruleForm.customerType,
      };
      saveBaseZjAccount(postdata).then(res => {
        if(res.code!=200){
           this.$message({
            type: "error",
            message: res.msg
          });
        }else{
          this.getOpenAccountDetail()
          this.$message({
            type: "success",
            message: res.msg
          });
        }
         
      });
    },
     updateBaseZjAccount() {
        let postdata = {
        id:this.id,
        baseShopId: this.merchantId,
        accountName : this.ruleForm.accountName,
        certificateType :'0',
        certificateNo :this.ruleForm.certificateNo,
        customerType: this.ruleForm.customerType,
        status :'0'
      };
      updateBaseZjAccount(postdata).then(res => {
         if(res.code!=200){
           this.$message({
            type: "error",
            message: res.msg
          });
        }else{
         this.getOpenAccountDetail()
          this.$message({
            type: "success",
            message: res.msg
          });
        }
      });
    },
     getOpenAccountDetail() {
      let postdata = {
        orgId: this.merchantId,
      };
      getOpenAccountDetail(postdata).then(res => {
        if(res.data){
           this.ruleForm=res.data
            this.ruleForm.certificateTypes="身份证"
            this.id=res.data.id
            this.ruleForm.customerType=res.data.customerType.toString()
            if(res.data.status==0){
              this.showtext=true
            }else{
              this.showtext=false
            }
        }

      });
    },
  }
}
</script>
<style scoped>
.store-openMsg{
width: 500px;
}
#app{
  text-align: initial;
}
.setting {
  float: right;
  margin: 10px 100px;
}
.rowtwo {
  display: inline-block;
}
.rowsecond {
  margin-left: 50px;
  vertical-align: top;
}
.imgbox {
  width: 180px;
  height: 150px;
  border: 1px dashed #dcdfe6;
}
.imgbox img {
  width: 100%;
  height: 100%;
}
.picmain label {
  width: 200px !important;
}
/* .fixhead {
  position: fixed;
} */
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* .system .el-input-group--prepend .el-input__inner,
.el-input-group__append {
  border: solid 1px #579ff8;
  background-color: #579ff8;
}
.system .el-input-group__append button.el-button,
.el-input-group__append div.el-select .el-input__inner,
.el-input-group__append div.el-select:hover .el-input__inner,
.el-input-group__prepend button.el-button,
.el-input-group__prepend div.el-select .el-input__inner,
.el-input-group__prepend div.el-select:hover .el-input__inner {
  color: #ffffff;
} */
.addshopname .sysinputs .el-input {
  width: 100px;
}
.addshopname .sysinputs .el-pagination__editor.el-input .el-input__inner {
  width: 50px;
}
.map-content {
  width: 100%;
  height: 200px;
}
.map-demo {
  width: 100%;
  height: 200px;
}
.map-error-position .el-form-item__error {
  top: 20%;
}
</style>

